<!DOCTYPE html>
<html>
{include file="public/header" /}
<body>
<style>
  .layui-input-inline{
    width: 400px !important;
  }
</style>

<div class="layui-fluid" id="app">
  <div class="layui-row layui-col-space15">
    <div class="layui-col-md12">
      <div class="layui-card" >
        <!--<div class="layui-card-header">商品列表</div>-->
        <div class="layui-card-body">

          <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
            <ul class="layui-tab-title">
              <li class="" onclick="go('index')">商品列表</li>
              <li class="layui-this"><a href="{:url('admin/goods/add')}">新增商品</a></li>

            </ul>
            <div class="layui-tab-content" style="padding-left: 0px;padding-right: 0px">


              <div class="layui-tab-item layui-show" style="padding-top: 15px">
                <form class="layui-form " action="">
                  <div class="layui-form-item">
                    <label class="layui-form-label">店铺</label>
                    <div class="layui-inline">
                      <div class="layui-input-inline" style="width: 100px;">
                        <input type="text" class="layui-input" id="selected_dp" style="display: none;color: red" readonly="readonly" value="">
                        <input type="hidden" name="shop_uid" value="" id="dp">
                      </div>
                      <div class="layui-input-inline">
                        <button type="button" class="layui-btn " id="" style=""  onclick="selectdp(this)">
                          选择店铺
                        </button>
                        <!--<button type="button" class="layui-btn layui-btn-primary" id="pinpainew" onclick="addpinpai(this)">-->
                        <!--新增品牌-->
                        <!--</button>-->

                      </div>
                    </div>

                  </div>
                  <div class="layui-form-item">
                    <label class="layui-form-label">名称</label>
                    <div class="layui-input-block">
                      <input type="text" name="name" value=""  class="layui-input"   lay-verify="required" placeholder="请输入商品名称">
                    </div>
                  </div>
                  <div class="layui-form-item">
                    <label class="layui-form-label">分类</label>
                    <div class="layui-input-block">
                  <select name="fenlei" lay-verify="required" >
                    <option value=""></option>
                    <option value="开关">开关</option>
                    <option value="门">门</option>
                    <option value="地板">地板</option>
                    <option value="窗帘">窗帘</option>
                    <option value="油漆">油漆</option>
                    <option value="锁">锁</option>
                    <option value="插座">插座</option>
                  </select>
                </div>
              </div>
                  <div class="layui-form-item">
                    <label class="layui-form-label">型号</label>
                    <div class="layui-input-block">
                      <input type="text" name="xinghao" value=""  class="layui-input" lay-verify="required"placeholder="请输入商品名型号">
                    </div>
                  </div>

                  <div class="layui-form-item">
                    <label class="layui-form-label">材质</label>
                    <div class="layui-input-block">
                      <input type="text" name="caizhi" value=""  class="layui-input" lay-verify="required" placeholder="请输入商品材质">
                    </div>
                  </div>
                  <div class="layui-form-item">
                    <label class="layui-form-label">位置</label>
                    <div class="layui-input-block">
                      <input type="checkbox" name="wz" title="客厅" lay-skin="primary" value="客厅">
                      <input type="checkbox" name="wz" title="厨房" lay-skin="primary" value="厨房">
                      <input type="checkbox" name="wz" title="卧室" lay-skin="primary" value="卧室">
                      <input type="checkbox" name="wz" title="洗漱台" lay-skin="primary" value="洗漱台">
                      <input type="checkbox" name="wz" title="阳台" lay-skin="primary" value="阳台">
                      <input type="checkbox" name="wz" title="浴室" lay-skin="primary" value="浴室">
                    </div>
                  </div>

                  <div class="layui-form-item">
                      <label class="layui-form-label">品牌</label>
                      <div class="layui-inline">
                        <div class="layui-input-inline" style="width: 100px;">
                          <input type="text" class="layui-input" id="selected"  readonly="readonly" style="display: none;color: red" value="">
                          <input type="hidden" name="pinpai_id" value="" id="pp">
                        </div>
                        <div class="layui-input-inline">
                          <button type="button" class="layui-btn " id="pinpai" style=""  onclick="selectpinpai(this)" >
                            选择品牌
                          </button>
                        </div>
                      </div>
                    <div class="layui-inline">
                      <label class="layui-form-label">价格</label>
                      <div class="layui-input-inline" >
                        <input type="text" name="price" value=""  class="layui-input" placeholder="请输入价格" lay-verify="required" >
                      </div>
                      <div class="layui-form-mid">元</div>

                    </div>
                    <div class="layui-inline">
                      <label class="layui-form-label">优惠</label>
                      <div class="layui-input-inline" >
                        <input type="text" name="discount" value=""  class="layui-input" lay-verify="required" >
                      </div>
                      <div class="layui-form-mid">折</div>

                    </div>

                  </div>
                  <div class="layui-form-item">
                    <label class="layui-form-label">图片</label>

                    <div class="layui-input-inline " style="width: auto;">

                      <div class="layui-upload-drag" id="pic1" style="padding: 2px">
                        <img class="layui-upload-img" style="width: 120px;height: 120px; object-fit: cover;" src="/res/img/thumb.png" id="im">
                        <input type="hidden" name="thumb" value="" >
                      </div>


                    </div>
                  </div>

                  <div class="layui-form-item layui-form-text">
                    <label class="layui-form-label">简介</label>
                    <div class="layui-input-block">
                      <textarea name="remarks" placeholder="请输入内容" class="layui-textarea"></textarea>
                    </div>
                  </div>
                  <div class="layui-form-item">
                    <div class="layui-input-block">
                      <button class="layui-btn" lay-submit lay-filter="goods">确认添加</button>
                      <button type="reset" class="layui-btn layui-btn-primary" onclick="restart()">重新填写</button>
                    </div>
                  </div>
                </form>
              </div>

            </div>
          </div>


        </div>


      </div>

    </div>


  </div>
</div>



<script>

    layui.use(['form','upload'], function () {
        var $ = layui.$
            , layer = layui.layer
            , form = layui.form;
        var upload = layui.upload;

        //监听提交商品的添加
        form.on('submit(goods)', function (obj) {
            //提交复选框选中的值
            var groupCheckbox=$("input[name='wz']");
            // console.log(groupCheckbox);
            var weizhi="";
            for(i=0;i<groupCheckbox.length;i++){
                if(groupCheckbox[i].checked){
                    var val =groupCheckbox[i].value;
                    if(weizhi.length>0){
                        weizhi+=","+val;
                    }else{
                        weizhi+=val;
                    }

                }
            }
            obj.field['weizhi']=weizhi;
//            layer.msg(JSON.stringify(obj.field));
            $.post("{:url('add')}", obj.field, function (res) {
                if (res.code == 1) {
                    layer.msg(res.msg, {icon: 1});
                    $('#pic1 img').attr('src','/res/img/thumb.png');
                    $('.layui-form')[0].reset();
                    return false;
                } else {
                    layer.msg(res.msg, {icon: 2}, function () {

                    })
                    return false;
                }

            });
            return false;
        });

        //拖拽上传
        upload.render({
            elem: '#pic1'
            ,url: '/tool/qiniu/upload'
            ,before:function () {
                layer.load(2);
            }
            ,done: function(res){
                layer.closeAll();
                console.log(res)
                $('#pic1 img').attr('src',res.data.url);
                $('#pic1 input').val(res.data.pic);
            }
        });
    });
    //选择店铺弹窗
    function selectdp(that) {

        var data_id = $(that).attr('data_id');
        layer.open({

            type: 2,
            title: '选择',
            shadeClose: true,
            shade: 0.01,
            area: ['80%', '80%'],
            content: "{:url('selectdp')}?id=" + data_id //iframe的url

        });

    }
    //选择店铺内容值获取
    function dianpu(uid,name) {
        // console.log(uid);
        // console.log(name);
        $('#selected_dp').val(name);
        $('#dp').val(uid);
        $('#selected_dp').show();

    }
    //选择品牌弹窗
    function selectpinpai(that) {

        var data_id = $(that).attr('data_id');
        layer.open({

            type: 2,
            title: '选择',
            shadeClose: true,
            shade: 0.01,
            area: ['80%', '80%'],
            content: "{:url('selectpinpai')}?id=" + data_id //iframe的url

        });

    }
    //选择品牌内容值获取
    function selectpp(id,name) {
        // console.log(id);
        // console.log(name);
        $('#selected').val(name);
        $('#pp').val(id);
        $('#selected').show();

    }
    //重新选择图片
  function restart(){
        $('#im').attr('src','/res/img/thumb.png');
  }
</script>
</body>
